<template>
  <div class="template-config-panel">
    <el-form :model="configData" label-width="120px">
      <el-form-item label="启用此模板">
        <el-switch
          v-model="configData.isEnabled"
          active-text="启用"
          inactive-text="禁用"
          @change="handleEnableChange"
        />
      </el-form-item>
      
      <template v-if="configData.isEnabled">
        <el-form-item label="选择模板" prop="templateId">
          <el-select
            v-model="configData.templateId"
            placeholder="请选择模板"
            style="width: 100%"
            filterable
            @change="handleTemplateChange"
          >
            <el-option
              v-for="template in templateList"
              :key="template.id"
              :label="template.templateName"
              :value="template.id"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="考试时长" v-if="templateType !== '综合评审'">
          <el-input-number
            v-model="configData.timeLimit"
            :min="1"
            :max="480"
            controls-position="right"
            style="width: 200px"
          />
          <span style="margin-left: 10px;">分钟</span>
        </el-form-item>
        
        <el-form-item label="及格分数">
          <el-input-number
            v-model="configData.passScore"
            :min="0"
            :max="100"
            :precision="1"
            controls-position="right"
            style="width: 200px"
          />
          <span style="margin-left: 10px;">分</span>
        </el-form-item>

        <el-form-item label="满分分数">
          <el-input-number
            v-model="configData.totalScore"
            :min="configData.passScore || 60"
            :max="100"
            :precision="1"
            controls-position="right"
            style="width: 200px"
          />
          <span style="margin-left: 10px;">分</span>
        </el-form-item>
        
        <el-form-item label="重考次数" v-if="templateType !== '综合评审'">
          <el-input-number
            v-model="configData.retakeLimit"
            :min="0"
            :max="5"
            controls-position="right"
            style="width: 200px"
          />
          <span style="margin-left: 10px;">次</span>
        </el-form-item>
        
        <el-form-item label="特殊要求">
          <el-input
            v-model="configData.specialRequirements"
            type="textarea"
            :rows="3"
            placeholder="请输入特殊要求"
          />
        </el-form-item>
        
        <el-form-item label="模板预览" v-if="selectedTemplate">
          <el-card class="template-preview">
            <div class="preview-header">
              <h4>{{ selectedTemplate.templateName }}</h4>
              <el-tag>{{ selectedTemplate.templateType }}</el-tag>
            </div>
            <div class="preview-content">
              <p><strong>适用职业：</strong>{{ selectedTemplate.professionName }}</p>
              <p><strong>技能等级：</strong>{{ selectedTemplate.skillLevel }}</p>
              <p><strong>模板描述：</strong>{{ selectedTemplate.templateDescription }}</p>
              <p><strong>默认时长：</strong>{{ selectedTemplate.timeLimit }} 分钟</p>
              <p><strong>默认及格分：</strong>{{ selectedTemplate.passingScore }} 分</p>
            </div>
          </el-card>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed } from 'vue'

defineOptions({ name: 'TemplateConfigPanel' })

const props = defineProps<{
  modelValue: any
  templateType: string
  professionCode: string
  skillLevel: string
}>()

const emit = defineEmits(['update:modelValue'])

const templateList = ref([])
const selectedTemplate = ref(null)

const configData = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 监听配置变化
watch(() => configData.value, (newValue) => {
  emit('update:modelValue', newValue)
}, { deep: true })

// 监听职业和等级变化，重新加载模板列表
watch([() => props.professionCode, () => props.skillLevel], async () => {
  if (props.professionCode && props.skillLevel) {
    await loadTemplateList()
  }
}, { immediate: true })

/** 加载模板列表 */
const loadTemplateList = async () => {
  try {
    // TODO: 调用获取模板列表的API
    // const params = {
    //   professionCode: props.professionCode,
    //   skillLevel: props.skillLevel,
    //   templateType: props.templateType,
    //   templateStatus: 1 // 只获取启用的模板
    // }
    // const data = await getTemplateList(params)
    // templateList.value = data.list || []
    
    // 模拟数据
    templateList.value = [
      {
        id: 1,
        templateName: `${props.templateType}模板1`,
        templateType: props.templateType,
        professionName: '电工',
        skillLevel: props.skillLevel,
        templateDescription: '标准模板',
        timeLimit: props.templateType === '理论考试' ? 120 : props.templateType === '实操考核' ? 180 : 60,
        passingScore: 60
      }
    ]
  } catch (error) {
    console.error('加载模板列表失败:', error)
  }
}

/** 启用状态变更 */
const handleEnableChange = (enabled: boolean) => {
  if (!enabled) {
    configData.value.templateId = undefined
    selectedTemplate.value = null
  }
}

/** 模板选择变更 */
const handleTemplateChange = (templateId: number) => {
  selectedTemplate.value = templateList.value.find(t => t.id === templateId) || null
  
  if (selectedTemplate.value) {
    // 自动填充默认值
    configData.value.timeLimit = selectedTemplate.value.timeLimit
    configData.value.passingScore = selectedTemplate.value.passingScore
    configData.value.maxScore = 100
    configData.value.retakeLimit = 2
  }
}
</script>

<style scoped>
.template-config-panel {
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #fafafa;
}

.subject-info,
.template-preview {
  background-color: #f5f7fa;
  border: 1px solid #e4e7ed;
}

.info-row {
  display: flex;
  margin-bottom: 8px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.label {
  font-weight: bold;
  min-width: 80px;
  color: #606266;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.preview-header h4 {
  margin: 0;
  color: #303133;
}

.preview-content p {
  margin: 8px 0;
  color: #606266;
  font-size: 14px;
}
</style>
